<!--
 * @Description: 打印
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-07-22 15:09:31
 * @FilePath: /yuxiuproweb/src/views/mes/pro/preparation/mods/print.vue
-->
<template>
  <el-drawer
    size="80%"
    :visible.sync="shows"
    direction="ltr"
    :with-header="false"
    class="drawer-view"
    :before-close="updateList"
  >
    <div id="printContent">
      <h1 style="text-align: center">墙布备料单 {{ getTodate() }}</h1>
      <div>
        <table
          class="mt10 table-top"
          width="100%"
          border="1"
          cellpadding="2"
          cellspacing="0"
          align="center"
          style="
            table-layout: fixed;
            word-break: break-all;
            word-wrap: break-word;
          "
        >
          <tr>
            <th colspan="1">序号</th>
            <th colspan="3">下单日期</th>
            <th colspan="2">订单号</th>
            <th colspan="3">工单号</th>
            <th colspan="3">客户</th>
            <th colspan="3">型号</th>
            <th colspan="2">长度</th>
            <th colspan="2">高度</th>
            <th colspan="2">工艺</th>
            <th colspan="3">批号</th>
            <th colspan="3">备注</th>
          </tr>
          <tr align="center" v-for="(item, index) in list" :key="index">
            <td colspan="1">{{ index + 1 }}</td>
            <td colspan="3">{{ item.orderDate }}</td>
            <td colspan="2">{{ item.number }}</td>
            <td colspan="3">{{ item.workOrderNumber }}</td>
            <td colspan="3">{{ item.clientName }}</td>
            <!-- <td colspan="3">
              {{ item.modelNumber }}
            </td> -->
            <template v-if="item.dealRowSpan != 0">
              <td colspan="3" :rowspan="item.dealRowSpan">
                <div>{{ item.modelNumber }}</div>
              </td>
            </template>
            <td colspan="2">
              {{ item.length }}
            </td>
            <td colspan="2">
              {{ item.height }}
            </td>
            <td colspan="2">
              <span v-if="item.technology == 0">冷胶</span>
              <span v-if="item.technology == 1">热胶</span>
              <span v-if="item.technology == 3">先冷后热</span>
              <span v-if="item.technology == 2">无工艺</span>
            </td>
            <td colspan="3">
              {{ item.batchNumber }}
            </td>
            <td colspan="3">
              {{ item.orderRemark }}
            </td>
          </tr>
          <tr>
            <td colspan="1"></td>
            <td colspan="3">合计</td>
            <td colspan="2"></td>
            <td colspan="3"></td>
            <td colspan="3"></td>
            <td colspan="3"></td>
            <td colspan="2">
              {{ countLengthFun(data) }}
            </td>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="3"></td>
            <td colspan="3"></td>
          </tr>
        </table>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import printJS from "print-js";
import { updateTaskIsPrint } from "@/api/qb";
export default {
  props: {
    show: Boolean,
    data: {
      type: Array,
    },
    type: String,
  },
  data() {
    return {
      list: [],
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  mounted() {
    this.initData();
    setTimeout(() => {
      this.printHtml();
    }, 60);
  },
  methods: {
    initData() {
      this.list = this.getList(this.data, "modelNumber", "dealRowSpan");
    },
    getList(list, code, rowSpan) {
      list = list.sort(function (a, b) {
        var x = a[code];
        var y = b[code];
        return x > y ? -1 : x < y ? 1 : 0;
      });
      let arrZero = [];
      return list.map((item, i) => {
        let RowSpanNum = 1;
        for (let j = i + 1; j < list.length; j++) {
          if (item[code] === list[j][code]) {
            arrZero.push(j);
            RowSpanNum++;
          } else {
            break;
          }
        }
        if (arrZero.findIndex((ele) => ele == i) != -1) {
          RowSpanNum = 0;
        }
        return {
          ...item,
          [rowSpan]: RowSpanNum,
        };
      });
    },

    getTodate() {
      let now = new Date();
      // 获取年、月、日、时、分、秒
      let year = now.getFullYear(); // 获取完整的年份(4位数字)
      let month = String(now.getMonth() + 1).padStart(2, "0"); // 月份是从0开始的，所以要加1
      let day = String(now.getDate()).padStart(2, "0"); // 获取日
      // 将年月日时分秒组合成字符串
      return `${year}-${month}-${day}`;
    },
    countLengthFun(data) {
      var lengths = 0;
      for (let i = 0; i < data.length; i++) {
        const item = data[i];
        lengths += Number(item.length);
      }
      lengths = Number(lengths.toFixed(2));
      return lengths;
    },
    printHtml() {
      const style =
        "@page { margin: 10px } @media print { .header-view { width: 100%; display: flex; align-items: center; justify-content: space-between; } .header-left {width: 60%;} .img-view { display: flex; align-items: center; }.img-view-img { height: 80px; } .img-view-img img { height: 100%; } .img-view-mods { margin-left: 10px; } .header-right { display: flex; align-items: center;} .header-right-img { width: 80px; height: 80px; margin-left: 10px; } .header-right-img img { width: 100%; height: 100%; } .table-top {margin-top: 10px} table, td, th { text-align: center; border: 1.5px solid #000; border-collapse: collapse;}td{font-size:12px}}";
      printJS({
        printable: "printContent",
        type: "html",
        style: style,
        base64: true,
        scanStyles: false,
        onPrintDialogClose: () => {
          console.log("打印对话框关闭");
          this.shows = false;
        },
      });
    },
    updateList() {
      this.$confirm("是否成功打印，并更新数据?", "提示", {
        confirmButtonText: "更新",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var paramArr = [];
          for (var i = 0; i < this.data.length; i++) {
            var item = this.data[i];
            paramArr.push(item.productionTaskId);
          }
          updateTaskIsPrint(paramArr).then((res) => {
            this.$emit("getList");
            this.shows = false;
          });
        })
        .catch(() => {
          this.shows = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.drawer-view {
  ::v-deep {
    .el-descriptions-row th {
      display: none;
    }
    .el-descriptions-row td {
      border: 1.5px solid #000;
      color: #000;
    }
  }
}

.header-view {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  .header-left {
    width: 60%;
  }
  .img-view {
    display: flex;
    align-items: center;
    &-img {
      height: 80px;
      img {
        height: 100%;
      }
    }
    &-mods {
      margin-left: 10px;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    &-img {
      width: 80px;
      height: 80px;
      margin-left: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
table,
td,
th {
  text-align: center;
  border: 1.5px solid #000;
  border-collapse: collapse;
  user-select: none;
}
</style>
